<template>
    <div>
        <PageTitle>找回密码</PageTitle>
        <div class="pages-top pages-scroll-two">
            <div id="login-img">
                <router-link to="/"><img src="../../static/img/V7_logo.png"></router-link>
            </div>
            <div id="msglogin">
                <input class="input-css" type="text" placeholder="手机号/邮箱">
                <div id="msglogin-flex">
                    <input id="msg" class="input-css" type="text" placeholder="短信验证码">
                    <button id="msg-button" class="button-css">获取短信验证码</button>
                </div>
                <input class="input-css" :type="isPsw?'text':'password'" placeholder="设置6-16位登录密码">
                <div @click="isPsw=!isPsw" id="psw"><img :src="isPsw?'../../static/icon/显示密码_icon.svg':'../../static/icon/隐藏密码.svg'"></div>
                <button class="button-css">确定</button>
            </div>
        </div>
    </div>
</template>
<script>
import PageTitle from "../components/PageTitle.vue";
export default {
    components:{PageTitle},
    data(){
        return {
            isPsw:false,
        }
    },
}
</script>
<style scoped>
    #login-img{
        text-align: center;
        margin: 5.6vw 0;
    }
    img{
        width: 47.04vw;
    }
    #msglogin{
        margin: 3.92vw;
        position: relative;
    }
    #msg{
        width: 55%;
    }
    #msg-button{
        width: 40%;
    }
    #msglogin-flex{
        display: flex;
        justify-content: space-between;
    }
    #psw{
        position: absolute;
        width: 5.6vw;
        right: 5vw;
         top: 44vw; 
        z-index: 10;
    }
    #psw img{
        width: 100%;
    }
</style>